<template>
  <div>
    <div style="margin-left: 10px">
      <h3 style="margin-left: 120px">化验收费</h3>
      <el-form :inline="true" :model="outpatients" class="demo-form-inline">
        <el-form-item>
          <el-input style="width: 300px" prefix-icon="el-icon-search" placeholder="请输入就诊卡号" v-model="mid"></el-input>
        </el-form-item>
<!--        <el-select v-model="payStatus" placeholder="请选择">
          <el-option
              v-for="item in value1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>-->
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>

        <el-table
            ref="singleTable"
            :data="outpatients"
            highlight-current-row
            @current-change="handleCurrentChange"
            style="width: 100%"
            height="300">
          <el-table-column
              prop="mid"
              label="卡号"
              width="150">
          </el-table-column>
          <el-table-column
              prop="tid"
              label="化验号"
              width="150">
          </el-table-column>
          <el-table-column
              prop="medicalCard.name"
              label="患者"
              width="150">
          </el-table-column>
          <el-table-column
              prop="medicalCard.sex"
              label="性别"
              width="150">
          </el-table-column>
          <el-table-column
              prop="test.name"
              label="化验项目"
              width="150">
          </el-table-column>
          <el-table-column
              prop="test.price"
              label="费用"
              width="150">
          </el-table-column>
          <el-table-column
              prop="patientTest.createTime"
              label="开单时间"
              width="200">
          </el-table-column>
          <el-table-column prop="patientTest.payStatus" label="缴费状态" width="150" >
            <template #default="scope">
              <el-tag v-if="scope.row.patientTest.payStatus" type="success">已缴费</el-tag>
              <el-tag v-else type="danger">未缴费</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="patientTest.status" label="化验状态" width="150" >
            <template #default="scope">
              <el-tag v-if="scope.row.patientTest.status" type="success">已化验</el-tag>
              <el-tag v-else type="danger">未化验</el-tag>
            </template>
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="150">
            <template slot-scope="scope">
              <el-button type="danger" size="small" class="el-button--danger" @click="handleDelete(scope.$index, scope.row)">退费</el-button>
            </template>
          </el-table-column>
        </el-table>
        应付金额：
        <el-form-item>
          <el-input style="width: 300px" prefix-icon="el-icon-search" placeholder="应付金额" v-model="price"></el-input>
        </el-form-item><br>
        实付金额：
        <el-form-item>
          <el-input style="width: 300px" prefix-icon="el-icon-search" placeholder="实付金额" v-model="revPrice" @input="getBack"></el-input>
        </el-form-item><br>
        找回金额：
        <el-form-item>
          <el-input style="width: 300px" prefix-icon="el-icon-search" placeholder="应找回金额" v-model="backPrice"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="toUpdate">缴费</el-button>
        </el-form-item>

      </el-form>
    </div>
  </div>
</template>

<script>
import {Message} from "element-ui";

export default {
  name: "ChargeTest",
  data(){
    return{
      mid:'',
      formLabelWidth:'120px',
      payStatus:'',
      value1:[
        {
          label:'未收费',
          value:false
        },
        {
          label:'已收费',
          value:true
        }
      ],
      outpatients:[
        {
          mid:'',
          tid:'',
          patientTest:'',
          test:'',
          medicalCard:''
        }
      ],
      patientTest:{
        id:'',
        createTime:'',
        payStatus:'',
        status:'',
        revPrice:'',
        backPrice:''

      },
      test:{
        name:'',
        price:''
      },
      medicalCard:{
        name:'',
        sex:''
      },
      currentRow:null,
      price:'',
      revPrice:'',
      backPrice:''
    }
  },
  methods:{

    //根据卡号查询化验收费信息
    onSubmit(){
      this.getRequest("/charge/getTestByMid?mid="+this.mid).then(resp=>{
        if(resp){
          this.outpatients=resp;
        }
      })
    },
    //点击获取表中信息
    handleCurrentChange(val){
      this.currentRow = val;
      this.patientTest=this.currentRow.patientTest;
      this.price=this.currentRow.test.price;
      this.revPrice='';
      this.backPrice='';
      this.patientTest.id=this.currentRow.tid;
    },
    //完成缴费
    toUpdate(){
      this.$confirm('此操作将完成缴费, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.putRequest("/charge/updateTest",this.patientTest).then(resp=>{
          if(resp){
            this.onSubmit();

          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消缴费'
        });
      });
    },
    //找零
    getBack(){
      this.backPrice=this.revPrice-this.price;
      this.patientTest.revPrice=this.revPrice;
      this.patientTest.backPrice=this.backPrice;
    },
    //退化验费
    handleDelete(index,data) {
      this.$confirm('应退还金额'+data.test.price+'元,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.putRequest("/charge/backTest?id="+data.patientTest.id).then(resp=>{
          if(resp){
            this.onSubmit();
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退费'
        });
      });
    },

  }
}
</script>

<style scoped>

</style>